<template>
	<view class="order-pages">
		
		<view @tap.stop="handerTabChange(index)" class="flex-1 top-item"
			v-for="(item,index) in tabList" :key="index" >
			<view v-if="index == activeIndex" class="f-title c-title flex-center" style="background-color: #169afe; height: 100rpx;">
				{{item.name}}
			</view>
			<view v-else-if="index % 5 == 1" class="f-title c-title flex-center" style="background-color: #fefbec; height: 100rpx;">
				{{item.name}}
			</view>
			<view v-else-if="index % 5 == 2" class="f-title c-title flex-center" style="background-color: #edfff1; height: 100rpx;">
				{{item.name}}
			</view>
			<view v-else-if="index % 5 == 3" class="f-title c-title flex-center" style="background-color: #edeffe; height: 100rpx;">
				{{item.name}}
			</view>
			<view v-else-if="index % 5 == 4" class="f-title c-title flex-center" style="background-color: #f5ecff; height: 100rpx;">
				{{item.name}}
			</view>
			<view v-else class="f-title c-title flex-center" style="background-color: #ffedeb; height: 100rpx;">
				{{item.name}}
			</view>
		</view>
		
		<view @tap.stop="goUserDetail(index,'detail')"
			class="list-item2 flex-y-end flex-x-end mb-md ml-md mr-md pd-lg fill-base radius-16" :style="'background-image: url(' + item.avatar + ');'"
			v-for="(item, index) in list" :key="index">
			
			<view class="flex-1 mr-sm" style="width: 100%;">
				<!-- <view class="member-tag flex-center c-base pl-sm pr-sm f-caption radius"
				 style="float: right;"><i
						class="iconfont icongerenxinxi mr-sm"></i>已实名
				</view> -->
				<view class="f-desc c-base ellipsis" style="margin: 5rpx 0; width: 100%;">{{ item.user_nicename }}</view>
				<view class="flex-warp flex-center fill-base radius log-tag" style="float: right;">
					<i class="iconfont iconjuli" :style="{color:primaryColor}"></i>
					<view class="f-desc c-title">{{ item.distance }}</view>
				</view>
			</view>
		</view>

		<load-more :noMore="list.current_page>=list.last_page&&list.length>0" :loading="loading" v-if="loading">
		</load-more>
		<abnor v-if="!loading&&list.length<=0&&list.current_page==1"></abnor>

		<view class="space-footer"></view>

		<view :style="{height: `${configInfo.tabbarHeight}px`}"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import tabbar from "@/components/tabbar.vue"
	import $api from '@/api/index.js';
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				options: {},
				loading: true,
				pageActive: false,
				activeIndex: 0,
				tabList: [
					{
						name: '全部',
						id: 0
					}
				],
				list: [],
				carList: {},
				haveOperItem: false,
				options: {},
				classList: [
					{
						id: 6,
						name: "交友",
						image: "/static/main/01.png",
						path: "/service/pages/user-list?id=6",
					},
					{
						id: 2,
						name: "心灵",
						image: "/static/main/02.png",
						path: "/service/pages/user-list-other?id=2",
					},
					{
						id: 273,
						name: "疗愈",
						image: "/static/main/03.png",
						path: "/service/pages/user-list-other?id=273",
					},
					{
						id: 252,
						name: "娱乐",
						image: "/static/main/04.png",
						path: "/service/pages/user-list-other?id=252",
					},
					{
						id: 1,
						name: "课堂",
						image: "/static/main/05.png",
						path: "/service/pages/user-list-other?id=1",
					},
					{
						id: 14,
						name: "美食",
						image: "/static/main/06.png",
						path: "/service/pages/user-list-other?id=14",
					},
					{
						id: 7,
						name: "养生",
						image: "/static/main/07.png",
						path: "/service/pages/user-list-other?id=7",
					},
					{
						id: 3,
						name: "医美",
						image: "/static/main/08.png",
						path: "/service/pages/user-list-other?id=3",
					},
					{
						id: 16,
						name: "休闲",
						image: "/static/main/09.png",
						path: "/service/pages/user-list-other?id=16",
					},
					{
						id: 11,
						name: "食疗",
						image: "/static/main/10.png",
						path: "/service/pages/user-list-other?id=11",
					},
					{
						id: 10,
						name: "家政",
						image: "/static/main/11.png",
						path: "/service/pages/user-list-other?id=10",
					},
					{
						id: 17,
						name: "自媒体",
						image: "/static/main/12.png",
						path: "/service/pages/user-list-other?id=17",
					},
					{
						id: 15,
						name: "创业",
						image: "/static/main/13.png",
						path: "/service/pages/user-list-other?id=15",
					},
					{
						id: 287,
						name: "健身",
						image: "/static/main/14.png",
						path: "/service/pages/user-list-other?id=287",
					},
					{
						id: 253,
						name: "电影",
						image: "/static/main/15.png",
						path: "/service/pages/user-list-other?id=253",
					},
					{
						id: 284,
						name: "汽车",
						image: "/static/main/16.png",
						path: "/service/pages/user-list-other?id=284",
					},
					{
						id: 58,
						name: "科技",
						image: "/static/main/17.png",
						path: "/service/pages/user-list-other?id=58",
					},
					{
						id: 13,
						name: "旅游",
						image: "/static/main/18.png",
						path: "/service/pages/user-list-other?id=13",
					},
					{
						id: 286,
						name: "首饰",
						image: "/static/main/19.png",
						path: "/service/pages/user-list-other?id=286",
					},
					{
						id: 5,
						name: "酒店",
						image: "/static/main/21.png",
						path: "/service/pages/user-list-other?id=5",
					},
					{
						id: 289,
						name: "减肥",
						image: "/static/main/20.png",
						path: "/service/pages/user-list-other?id=289",
					},
					{
						id: 285,
						name: "房产",
						image: "/static/main/22.png",
						path: "/service/pages/user-list-other?id=285",
					},
					{
						id: 12,
						name: "维修服务",
						image: "/static/main/23.png",
						path: "/service/pages/user-list-other?id=12",
					},
					{
						id: 288,
						name: "康复理疗",
						image: "/static/main/24.png",
						path: "/service/pages/user-list-other?id=288",
					},
					{
						id: 18,
						name: "其它",
						image: "/static/main/25.png",
						path: "/service/pages/user-list-other?id=18",
					},
				]
				
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
		}),
		async onLoad(options) {
			this.options = options;
			await this.getNewOnlineList()
			uni.setNavigationBarTitle({
				title: this.classList[options.index].name
			})
			// await this.initIndex()
		},
		onPullDownRefresh() {
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.loading) return;
			this.loading = true;
			this.getList();
		},
		methods: {
			...mapActions(['getConfigInfo']),
			async initIndex(refresh = false) {
				await this.getList(1)
				let list = await this.$api.service.classList({
					class_id: this.classList[this.options.index].id
				});
				list.forEach((item, index) => {
					this.tabList.push(item)
				})
				
				
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
			},
			initRefresh() {
				this.initIndex(true)
			},
			
			async getList() {
				this.getNewOnlineList()
			},
			async getNewOnlineList() {
				this.loading = true
				
				let param= {
					p: 1,
				}
				
				let data = [];
				
				data = await this.$api.message.getNewOnlineList(param)
				
				this.list = data
				
				this.loading = false
				this.$util.hideAll()
			},
			handerTabChange(index) {
				this.activeIndex = index
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.$util.showLoading()
				this.getList()
			},
			// 用户详情
			goUserDetail(index, page) {
				let {
					id
				} = this.list[index]
				let url = `/user/pages/user-detail?id=${id}`
				this.$util.goUrl({
					url
				})
			}
		}
	}
</script>


<style lang="scss">
	.top-item {
		float: left;
		box-sizing: border-box;
		width: 20%;
		height: 100rpx;
	}
	.list-item2 {
		float: left;
		box-sizing: border-box;
		width: 45%;
		height: 400rpx;
		padding: 10px 6px;
		
		background-position: center;
		background-size:cover;
		background-repeat: no-repeat;
		
		.member-tag {
			width: 168rpx;
			height: 46rpx;
			background: #0e0f0f;
		
			.iconfont {
				font-size: 28rpx;
			}
		}
		
		.log-tag {
			width: 168rpx;
			height: 46rpx;
			background: #fff;
		
		}
		
		.cover {
			width: 180rpx;
			height: 180rpx;
		}
		
		.text {
			width: 75rpx;
			height: 75rpx;
		}
		
		.image-bg {
			width: 55rpx;
			height: 55rpx;
			font-weight: 600;
			padding-top: 0rpx;
			text-align: center;
			background-position: center;
			background-size:cover;
			background-repeat: no-repeat;
			background-image: url("/static/common/avoid.png");
		}
	
		.time-long {
			min-width: 72rpx;
			height: 30rpx;
			padding: 0 5rpx;
			background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
			border-radius: 4rpx;
			font-size: 20rpx;
			color: #FFEEB9;
			margin-right: 16rpx;
		}
	
		.f-icontext {
			font-size: 18rpx;
		}
	
		.text-delete {
			font-size: 20rpx;
			color: #B9B9B9;
		}
	
		.item-btn {
			width: 130rpx;
			height: 52rpx;
			border-radius: 8rpx;
		}
	}
</style>
